<template>
  <div class="page">
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <div class="search-history">
        <p>搜索历史</p>
        <van-cell
          :center="true"
          v-for="(item, index) in searchList"
          :key="index"
        >
          <template #title>
            <div class="group-item">
              <van-image width="40" height="40" radius="5" :src="item.url" />
              <div class="group-title">{{ item.name }}</div>
            </div>
          </template>
          <template #right-icon>
            <van-icon
              name="cross"
              color="#c8c9cc"
              style="line-height: inherit;"
              @click="deleteitem(index)"
            />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      searchList: [
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "张坤"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "前端开发"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "张坤"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "前端开发"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "张坤"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "前端开发"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "张坤"
        },
        {
          url: "https://img.yzcdn.cn/vant/cat.jpeg",
          name: "前端开发"
        }
      ]
    };
  },
  mounted() {
      this.$store.commit("hideTabBar");
  },
  methods: {
    onSearch(val) {
      this.$toast(val);
    },
    onCancel() {
      this.$router.push("/")
    },
    deleteitem(index){
        this.searchList.splice(index,1);
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  .van-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .search-history {
    p {
      padding: 0px 16px;
      padding-bottom: 5px;
      font-size: 13px;
      color: gray;
      background: #ffffff;
      border-bottom: 1px solid #f7f8fa;
    }
    padding-top: 54px;
    .group-item {
      display: flex;
      align-items: center;
      .group-title {
        padding-left: 10px;
        font-size: 16px;
      }
    }
  }
}
</style>
